<template>
	<view>
		<view class="mt10">
			<u-tabs @click="switchTab" :list="tab" lineWidth="42" lineHeight="2" lineColor="#418FF4"
				:inactiveStyle="{color: '#418FF4'}" :activeStyle="{color: '#418FF4'}"
				:itemStyle="{width: 'calc(25% - 22px)',paddingBottom: '10px'}" ></u-tabs>
		</view>

		<view class="dm-tab-content">
			<view class="searchbox">
				<view class="start">
					<input v-model="start" placeholder-style="color:#BFBFBF" placeholder="设备序列号(开始)" />
					<image  mode="aspectFill" src="../static/sys-icon.png"></image>
				</view>
				<view class="line"></view>
				<view class="end">
					<input v-model="end" placeholder-style="color:#BFBFBF" placeholder="设备序列号(结束)" />
					<image  mode="aspectFill" src="../static/sys-icon.png"></image>
				</view>
				<view class="sobtn" @click="search">搜索</view>
			</view>
			<view class="list-info">
				<view class="left">共<text>{{total|0}}</text>台设备</view>

			</view>
			<view class="device-list">
				<view class="device-list-item" v-for="item in list" @click="clickItem(item)">
					<view class="cell01">
						<view class="name"><text>{{item.name}}</text></view>
						<view class="summary"><text>设备编号：</text><text>{{item.device_no}}</text></view>
						<view class="summary"><text>入库时间：</text><text>{{item.create_time_txt}}</text></view>
						<view class="summary"><text>分成比例：</text><text>{{item.ratio}}%</text></view>
					</view>
					<view class="cell02" @click="checkChange(item)">
						<text class="status1" v-if="item.status == 'unbind' ">未激活</text>
						<text class="status2" v-else>已激活</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				defaultCurr: '0',
				tab: [{
						name: '全部'
					},
					{
						name: '已激活'
					},
					{
						name: '未激活'
					}
				],
				currentTab: 0,
				checkedList: [],
				allChecked: false,
				page: 1,
				status: '',
				list: [],
				isLastPage: false,
				total: '',
				start: '',
				end: '',
				isnodata: false
			}
		},
		onLoad() {
		
		},

		onShow() {
			this.page = 1;
			this.list = [];
			this.isLastPage = false;
			this.isnodata = false;
			this.deviceList();
		},
		onReachBottom() {

			if (this.isLastPage) return;
			this.page += 1;
			this.deviceList();
		},
		methods: {
			
			switchTab(e){
				var name = e.name;
				if(name == '全部'){
					this.status = '';
				}else if(name == '已激活'){
					this.status = 'bind';
				}else {
					this.status = 'unbind';
				}
				this.page = 1;
				this.list = [];
				this.isLastPage = false;
				this.isnodata = false;
				this.deviceList();
			},
			
			clickItem(item){
				uni.navigateTo({
					url:'/other/charge/edit?device_no='+item.device_no
				})
			},

			startScan() {

				let that = this;
				this.$util.$scanCode(function(res) {
					console.info("====res==" + res);

					var index = res.lastIndexOf("\/");
					var deviceno = res.substring(index + 1, res.length)
					console.info("======" + deviceno);
					that.start = deviceno;
				});
			},
			endScan() {
				let that = this;

				this.$util.$scanCode(function(res) {
					var index = res.lastIndexOf("\/");
					var deviceno = res.substring(index + 1, res.length)
					that.end = deviceno;
				});
			},

			history() {

				uni.navigateTo({
					url: './transfer'
				})
			},

			search() {
				this.page = 1;
				this.list = [];
				this.deviceList();
			},


			deviceList() {
				let param = {
					page: this.page,
					status: this.status,
					startDevice: this.start,
					endDevice: this.end
				}
				let that = this;
				this.$api.lineDeviceList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.total = res.data.total;
						let length = res.data.list.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data.list[i]);
						}
						if (that.list.length > 0) {
							this.isnodata = false;
						} else {
							this.isnodata = true;
						}
						if (length < 10) {
							that.isLastPage = true;
						} else {
							that.isLastPage = false;
						}
					}
				})
			},

			getPage() {
				uni.navigateTo({
					url: '/pages/deviceManage/deviceManage'
				})
			},
			doTransfer() {


				var select = new Array();
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].isChecked == true) {
						//this.checkedList.push(this.list[i]);
						select.push(this.list[i].deviceno);

					}
				}
				console.info(JSON.stringify(select));

				if (select.length == 0) {
					this.$util.$showToast('请选择需要划拨的设备', '', 'none');
					return;
				}
				uni.redirectTo({
					url: './transferTo?deviceno=' + JSON.stringify(select)
				})



			},
			checkChange(item) {

				let count = 0;
				item.isChecked = !item.isChecked;
				console.info(JSON.stringify(item));

			},
			checkAll() {
				this.checkedList = [];
				this.allChecked = !this.allChecked;
				if (this.allChecked) {
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].isChecked = true;
						//this.checkedList.push(this.list[i]);
					}
				} else {
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].isChecked = false;
					}
					//this.checkedList = [];
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.link-text {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		color: #E69825;
		font-size: 26rpx;
		cursor: pointer;
		background: #FFFFFF;
		width: 30%;
		height: 88rpx;
		line-height: 88rpx;
		padding-right: 30rpx;
		text-align: right;
	}

	.searchbox {
		background: #FFFFFF;
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		padding: 20rpx 0 0 20rpx;

		.start {
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			display: flex;
			background: #F8f8f8;

			input {
				font-size: 24rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 20rpx;
				color: #333333;
			}

			image {
				width: 44rpx;
				height: 44rpx;
				margin-top: 14rpx;
				padding-right: 20rpx;
			}
		}

		.line {
			width: 22rpx;
			height: 1rpx;
			background: #BFBFBF;
			margin: 34rpx 10rpx;
		}

		.end {
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			display: flex;
			background: #F8f8f8;

			input {
				font-size: 24rpx;
				color: #333333;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 20rpx;
			}

			image {
				width: 44rpx;
				height: 44rpx;
				margin-top: 14rpx;
				padding-right: 20rpx;
			}
		}

		.sobtn {
			font-size: 26rpx;
			color: #8E8E8E;
			width: 150rpx;
			text-align: center;
		}
	}

	.list-info {
		background: #FFFFFF;
		padding: 27rpx 38rpx;
		display: flex;

		.left {
			flex: auto;
			color: #8E8E8E;
			font-size: 26rpx;

			text {
				color: #E69825;
				font-size: 26rpx;
				padding: 0 10rpx;
			}
		}

		.right {
			color: #8E8E8E;
			font-size: 26rpx;
			vertical-align: middle;

			image {
				width: 38rpx;
				height: 38rpx;
				vertical-align: middle;
				margin-right: 10rpx;
				margin-top: -6rpx;
			}
		}
	}

	.device-list {
		.device-list-item {
			display: flex;
			margin: 30rpx 30rpx 0 30rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;

			.cell01 {
				flex: auto;

				.name {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}

				.summary {
					font-size: 28rpx;
					color: #8E8E8E;
				}
			}

			.cell02 {
				margin-top: 20rpx;

				image {
					width: 38rpx;
					height: 38rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}

				.status1 {
					font-size: 26rpx;
					color: #FF0000;
					vertical-align: middle;
				}

				.status2 {
					font-size: 26rpx;
					color: #333333;
					vertical-align: middle;
				}
			}
		}
	}
</style>